<template>
  <div class="content">
     <div class="form-box">
     	<div class="form">
			<h1 style="font-size:calc(100vh * 0.03);line-height:calc(100vh * 0.03);">宁波亿瑞闸机后台管理系统</h1>
			<el-form ref="form" :rules="rules" :model="form" label-width="calc(100vw * 0.03)">
			  <div>
				  <el-input size="mini"  prop="username" placeholder="请输入用户名" v-model="form.name"  prefix-icon="el-icon-user"></el-input>
			  </div>
			  <div>
				  <el-input size="mini" prop="password" placeholder="请输入密码" @keyup.enter.native="Submit('form')" v-model="form.password" show-password prefix-icon="el-icon-lock"></el-input>
			  </div>	  
			  <div class="form-bottom">
			     	<el-checkbox v-model="checked" @change="oRemember">记住密码</el-checkbox>
					<!-- <a href="#">忘记密码？</a> -->
			  </div>
			  <el-button class="login" @click="Submit('form')">登录</el-button>
			 </el-form>
		</div>
     </div>
  </div>
</template>

<script type="text/javascript">
	export default{
		data(){
			return{
				form: {
				  name: '',
				  region: '',
				  date1: '',
				  date2: '',
				  delivery: false,
				  type: [],
				  resource: '',
				  desc: ''
				},
				checked:false,
				 rules:{
				// username
				username:[
					{ required: true, message: '请输入用户名', trigger: 'blur' },
				],
				password:[
					{ required: true, message: '请输入密码', trigger: 'blur' },
				],
				}
			}
		},
		created(){
			if ( this.getCookie( 'user' ) && this.getCookie( 'pswd' )){
				this.form.name = this.getCookie( 'user' );
				this.form.password = this.getCookie( 'pswd' );
				// this.checked = true ;
			}
		},
		methods:{
			Submit(formName) {
				 if (this.checked){
					this.setCookie( 'user' ,this.form.name,7); //保存帐号到cookie，有效期7天
					this.setCookie( 'pswd' ,this.form.password,7); //保存密码到cookie，有效期7天
				}else{
					this.delCookie("user")
					this.delCookie("pswd")
				}
				if(!this.form.name){
				this.$message("请输入用户名")
				return;
				}
				if(!this.form.password){
				this.$message("请输入密码")
				return;
				}
				this.$refs[formName].validate((valid) => {
					if (valid) {
					if(this.form.name=="admin"&&this.form.password=="123456"){
						this.$store.commit ('setToken',"fdwerf322ed")
						this.$message({
						showClose: true,
						message: '登录成功',
						type: 'success',
						duration:1500
						});
						this.$router.push("/healthy")
					}else{
						this.$message("用户名或密码错误")
					}
					} else {
					this.$message({
						showClose: true,
						message: "内容验证失败",
						type: 'error',
						duration:1500
					});
					return false;
					}
				});
			},
			go(e){
				// console.log(e);
			},
			oRemember(){

			},
			setCookie(name,value,day){
				var date = new Date();
				date.setDate(date.getDate() + day);
				document.cookie = name + '=' + value + ';expires=' + date;
			},
			getCookie(name){
				var reg = RegExp(name+ '=([^;]+)' );
				var arr = document.cookie.match(reg);
				if (arr){
				return arr[1];
				} else {
				return '' ;
				}
			},
			delCookie(name){
				this.setCookie(name, null ,-1);
			}
		}
	}
</script>

<style type="text/css" scoped lang="scss">
	.content{
		width: 100%;
		height: calc(100vh);
		background: url(../assets/login-bg.png) no-repeat;
		background-size: cover;
		display: flex;
		align-items: center;
		justify-content: center;
		a{
		  text-decoration: none;
		}
		.form-box{
			width:calc(100vw * 0.72);
			height: calc(100vh * 0.8);
			background-color: #fff;
			border-radius: calc(100vh * 0.08);
			position: relative;
			background: url(../assets/login-bg1.png) no-repeat #fff;
			background-size: 100% calc(100vh * 0.8);
			h1{
				font-size: calc(100vh );
				color: #3d7eff;
			}
			.form{
				width: 40%;
				height: 100%;
				display: flex;
				position: absolute;
				flex-direction: column;
				justify-content: center;
				right: 0%;
				.el-form{
					width: 60%;
					margin-top: 8%;
					.el-input{
						margin: 14px 0;
						height: calc(100vh * 0.06);
						width: calc(100vw * 0.2);
					}
					::v-deep .el-checkbox__inner{
						border: 1px solid #5579ff;
					}
					::v-deep .el-input__inner{
					   height: 55px;
					   border-radius: 32px;
					   height: calc(100vh * 0.06);
					   background-color: #f6f7fb;
					}
					.el-checkbox{
						color: #5579ff;
					}
					.el-checkbox__inner{
						border: 1px solid #5579ff;
					}
					.el-button{
						height: calc(100vh * 0.06);
						width: calc(100vw * 0.2);
						border-radius: calc(100vh * 0.03);
						background-color: #5579ff;
						margin-top: 20px;
					}
					.form-bottom{
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin: 12px 0;
						a{
							color: #5b78ff;
							font-size: 15px;
						}
					}
					.login{
						color: #fff;
					}
				}
			}
		}
	}
	
</style>
